<template>
  <!-- header -->
  <div class="nav-container page-component">
    <!--左侧导航 #start -->
    <div class="nav left-nav">
      <div class="nav-item">
        <span class="v-link clickable dark" onclick="javascript:window.location='/user'">
        实名认证
        </span>
      </div>
      <div class="nav-item">
        <span class="v-link clickable dark" onclick="javascript:window.location='/order'">
          挂号订单
        </span>
      </div>
      <div class="nav-item selected">
        <span class="v-link selected dark" onclick="javascript:window.location='/patient'">
          就诊人管理
        </span>
      </div>
      <div class="nav-item">
        <span class="v-link clickable dark"> 修改账号信息 </span>
      </div>
      <div class="nav-item">
        <span class="v-link clickable dark"> 意见反馈 </span>
      </div>
    </div>
    <!-- 左侧导航 #end -->
    <!-- 右侧内容 #start -->
    <div class="page-container">
      <div class="personal-patient">
        <div class="header-wrapper">
          <div class="title">添加就诊人</div>
        </div>
        <div>
          <div class="sub-title">
            <div class="block"></div>
            就诊人信息
          </div>
          <div class="content-wrapper">
            <el-form
              :model="patient"
              label-width="110px"
              label-position="left"
              ref="patient"
              :rules="validateRules"
            >
              <el-form-item prop="name" label="姓名：">
                <el-input
                  v-model="patient.name"
                  placeholder="请输入真实姓名全称"
                  class="input v-input"
                />
              </el-form-item>
              <el-form-item prop="certificatesType" label="证件类型：">
                <el-select
                  v-model="patient.certificatesType"
                  placeholder="请选择证件类型"
                  class="v-select patient-select"
                >
                  <el-option
                    v-for="item in certificatesTypeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="certificatesNo" label="证件号码：">
                <el-input
                  v-model="patient.certificatesNo"
                  placeholder="请输入证件号码"
                  class="input v-input"
                />
              </el-form-item>
              <el-form-item prop="sex" label="性别：">
                <el-radio-group v-model="patient.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="0">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="birthdate" label="出生日期：">
                <el-date-picker
                  v-model="patient.birthdate"
                  class="v-date-picker"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item prop="phone" label="手机号码：">
                <el-input
                  v-model="patient.phone"
                  placeholder="请输入手机号码"
                  maxlength="11"
                  class="input v-input"
                />
              </el-form-item>
            </el-form>
          </div>
          <div class="sub-title">
            <div class="block"></div>
            建档信息（完善后部分医院首次就诊不排队建档）
          </div>
          <div class="content-wrapper">
            <el-form
              :model="patient"
              label-width="110px"
              label-position="left"
              ref="patient"
              :rules="validateRules"
            >
              <el-form-item prop="isMarry" label="婚姻状况：">
                <el-radio-group v-model="patient.isMarry">
                  <el-radio :label="0">未婚</el-radio>
                  <el-radio :label="1">已婚</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="isInsure" label="自费/医保：">
                <el-radio-group v-model="patient.isInsure">
                  <el-radio :label="0">自费</el-radio>
                  <el-radio :label="1">医保</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="addressSelected" label="当前住址：">
                <el-cascader ref="selectedShow" v-model="patient.addressSelected" class="v-address" :props="props">
                  <h1>我为甚不出来地区呢?</h1>
                </el-cascader>
              </el-form-item>
              <el-form-item prop="address" label="详细地址：">
                <el-input
                  v-model="patient.address"
                  placeholder="应公安机关要求，请填写现真实住址"
                  class="input v-input"
                />
              </el-form-item>
            </el-form>
          </div>
          <div class="sub-title">
            <div class="block"></div>
            联系人信息（选填）
          </div>
          <div class="content-wrapper">
            <el-form :model="patient" label-width="110px" label-position="left">
              <el-form-item prop="contactsName" label="姓名：">
                <el-input
                  v-model="patient.contactsName"
                  placeholder="请输入联系人姓名全称"
                  class="input v-input"
                />
              </el-form-item>
              <el-form-item prop="contactsCertificatesType" label="证件类型：">
                <el-select
                  v-model="patient.contactsCertificatesType"
                  placeholder="请选择证件类型"
                  class="v-select patient-select"
                >
                  <el-option
                    v-for="item in certificatesTypeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="contactsCertificatesNo" label="证件号码：">
                <el-input
                  v-model="patient.contactsCertificatesNo"
                  placeholder="请输入联系人证件号码"
                  class="input v-input"
                />
              </el-form-item>
              <el-form-item prop="contactsPhone" label="手机号码：">
                <el-input
                  v-model="patient.contactsPhone"
                  placeholder="请输入联系人手机号码"
                  class="input v-input"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="bottom-wrapper">
          <div class="button-wrapper">
            <div class="v-button" @click="saveOrUpdate()">{{ submitBnt }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容 #end -->
  </div>
  <!-- footer -->
</template>
<script>
  import "~/assets/css/hospital_personal.css";
  import "~/assets/css/hospital.css";
  import "~/assets/css/personal.css";
  import dictApi from "@/api/dict";
  import patientApi from "@/api/patient";
  const defaultForm = {
    name: "",
    certificatesType: "",
    certificatesNo: "",
    sex: 1,
    birthdate: "",
    phone: "",
    isMarry: 0,
    isInsure: 0,
    provinceCode: "",
    cityCode: "",
    districtCode: "",
    addressSelected: null,
    address: "",
    contactsName: "",
    contactsCertificatesType: "",
    contactsCertificatesNo: "",
    contactsPhone: "",
    param: {},
  };
  export default {
    data() {
      return {
        patient: defaultForm,
        certificatesTypeList: [],
        props: {
          lazy: true,
          async lazyLoad(node, resolve) {
            const { level } = node;
            //异步获取省市区
            alert("获取省市区")

            dictApi.findByParentId(level ? node.value : "86").then((response) => {

              let list = response.data;
              let provinceList = list.map((item, i) => {
                return {
                  value: item.id,
                  label: item.name,
                  leaf: node.level == 2 ? true : false, //可控制显示几级
                };
              });
              resolve && resolve(provinceList);
            });
            alert("(node, resolve"+node+resolve)
          },
        },
        submitBnt: "保存",
        validateRules: {
          name: [{ required: true, trigger: "blur", message: "必须输入" }],
          certificatesType: [
            { required: true, trigger: "blur", message: "必须输入" },
          ],
          certificatesNo: [
            { required: true, trigger: "blur", message: "必须输入" },
          ],
          birthdate: [{ required: true, trigger: "blur", message: "必须输入" }],
          phone: [{ required: true, trigger: "blur", message: "必须输入" }],
          addressSelected: [
            { required: true, trigger: "blur", message: "必须输入" },
          ],
          address: [{ required: true, trigger: "blur", message: "必须输入" }],
        },
      };
    },
    created() {
      this.init();
    },
    mounted() {
      if (this.$route.query.id) {
        setTimeout(() => {
          this.$refs.selectedShow.presentText =
            this.patient.param.provinceString +
            "/" +
            this.patient.param.cityString +
            "/" +
            this.patient.param.districtString; //"北京市/市辖区/西城区";// 首次手动复制
          // this.$refs.selectedShow.value = '110000/110100/110102';
        }, 1000);
      }
    },
    methods: {
      init() {
        if (this.$route.query.id) {
          const id = this.$route.query.id;
          alert("进入if方法"+id)
          this.fetchDataById(id);
        } else {
          // 对象拓展运算符：拷贝对象，而不是赋值对象的引用

          this.patient = { ...defaultForm };
        }
        this.getDict();
      },

      fetchDataById(id) {
        patientApi.getById(id).then((response) => {
          this.patient = response.data;
          alert("this.patient:"+this.patient)
          //添加默认值
          this.patient.addressSelected = [
            this.patient.provinceCode,
            this.patient.cityCode,
            this.patient.districtCode,
          ];
        });
      },
      getDict() {
        dictApi.findByDictCode("CertificatesType").then((response) => {
          this.certificatesTypeList = response.data;
        });
      },

      saveOrUpdate() {
        this.$refs.patient.validate((valid) => {
          if (valid) {
            //地址处理
            if (this.patient.addressSelected.length == 3) {
              this.patient.provinceCode = this.patient.addressSelected[0];
              this.patient.cityCode = this.patient.addressSelected[1];
              this.patient.districtCode = this.patient.addressSelected[2];
            }
            if (!this.patient.id) {
              this.saveData();
            } else {
              this.updateData();
            }
          }
        });
      },
      // 新增
      saveData() {
        if (this.submitBnt == "正在提交...") {
          this.$message.info("重复提交");
          return;
        }
        this.submitBnt = "正在提交...";
        patientApi
          .save(this.patient)
          .then((response) => {
            this.$message.success("提交成功");
            window.location.href = "/patient";
          })
          .catch((e) => {
            this.submitBnt = "保存";
          });
      },
      // 根据id更新记录
      updateData() {
        if (this.submitBnt == "正在提交...") {
          this.$message.info("重复提交");
          return;
        }
        this.submitBnt = "正在提交...";
        patientApi
          .updateById(this.patient)
          .then((response) => {
            this.$message.success("提交成功");
            window.location.href = "/patient";
          })
          .catch((e) => {
            this.submitBnt = "保存";
          });
      },
    },
  };
</script>
<style>
  .header-wrapper .title {
    font-size: 16px;
    margin-top: 0;
  }
  .sub-title {
    margin-top: 0;
  }
  .bottom-wrapper {
    padding: 0;
    margin: 0;
  }
  .bottom-wrapper .button-wrapper {
    margin-top: 0;
  }
</style>
